<template>
  <div class="banner_box">
    <div class="banner_top flex-row">
      <div class="flex-grow-1 flex-y-center left-title">
        <img style="width: 0.36rem;margin-right:0.13rem" v-src="'/static/img/saishi_icon.png'" alt="">
        精彩赛事
      </div>
      <div @click="toGuessCenter" class="flex-grow-1 flex-right flex-y-center" style="font-size: 14px;">
        大厅
        <img style="width: 0.13rem;margin-left: 0.1rem" v-src="'/static/img/gengduo_icon.png'" alt="">
      </div>
    </div>
    <swiper height="2.56rem" :auto="true" :loop="true" dots-position="center" :interval=3000>
      <swiper-item class="flex-list" :key="index" v-for="(item,index) in matchList">
        <div @click="matchClick(item2)" class="matchBox flex-grow-0" v-for="(item2,i) in item">
          <div class="top-desc flex-row ">
            <div style="width: 1.8rem" class="flex-grow-1 flex-y-center">
              <img v-show="item2.s_id==4" style="width: 0.39rem;margin-right: 0.08rem"
                   v-src="'/static/img/lanqiu_icon.png'" alt="">
              <!--<img v-show="item2.s_id==4" style="width: 0.39rem;margin-right: 0.08rem" v-src="'/static/img/quanji_icon.png'" alt="">-->
              <img v-show="item2.s_id==2" style="width: 0.39rem;margin-right: 0.08rem"
                   v-src="'/static/img/taiqiu_icon.png'" alt="">
              <!--<img v-show="item2.s_id==4" style="width: 0.39rem;margin-right: 0.08rem" v-src="'/static/img/wangqiu_icon.png'" alt="">-->
              <!--<img v-show="item2.s_id==4" style="width: 0.39rem;margin-right: 0.08rem" v-src="'/static/img/yumaoqiu_icon.png'" alt="">-->
              <img v-show="item2.s_id==6" style="width: 0.39rem;margin-right: 0.08rem"
                   v-src="'/static/img/zuqiu_icon.png'" alt="">
              <p class="oneLine">{{item2.big_game_name}} {{item2.phase_name}}</p>
            </div>
            <div class="flex-grow-1 flex-y-center flex-right match_time">{{item2.start_time | normalTime}}</div>
          </div>
          <div class="match_detail flex-row">
            <div class="flex-grow-1 play_box flex-x-center">
              <div>
                <img class="img_style" :src="item2.apic" alt="">
                <p class="oneLine">{{item2.play_a_name}}</p>
              </div>
            </div>
            <div class="flex-grow-0">
              <div class="matching flex-x-center flex-y-center">
                {{item2.is_live==1?'直播中':item2.processing==1?'进行中':'竞猜中'}}
              </div>
            </div>
            <div class="flex-grow-1 play_box flex-x-center">
              <div>
                <img class="img_style" :src="item2.bpic" alt="">
                <p class="oneLine">{{item2.play_b_name}}</p>
              </div>
            </div>
          </div>
        </div>
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
  import {Swiper, SwiperItem} from 'vux'
  import {GETBANNER} from 'src/const/uri'

  function test(data) {
    alert(data);
  }

  export default {
    name: "HomeBanner",
    components: {Swiper, SwiperItem},
    data() {
      return {
        matchList: []
      }
    },
    mounted() {
      this.getMatchData()
    },
    methods: {
      test3(val) {
        alert(val);
      },
      getMatchData() {
        this.$ajax.get(GETBANNER).then(res => {
          console.log(res.data);
          // console.log(res);
          this.matchList = res.data;
        });
      },
      toGuessCenter() {
        if (window.android) {
          window.android.selecteMainGuess();
          // let toUrl = window.location.origin + '/guess/guessCenter.html';
          // window.android.jumpTo(toUrl);
        } else {
          window.webkit.messageHandlers.lwdkit.postMessage({
            action: "pushtoguesscenter",
            data: {}
          })
        }

        // window.location.href = window.location.origin + `/guess/guessCenter.html`
      },
      matchClick(item2) {
        // console.log(item2);
        /**
         *  is_live   0没有直播 1 直播中  //没有直播就是竞猜中
         * @ game_id : item2.id
         * @ is_live : item2.is_live
         * @ webUrl : webUrl
         * processing==1； 不跳转
         */
        let toUrl = window.location.origin + `/guess/guessDetails.html?id=${item2.id}`;
        let webUrl = item2.is_live == 1 ? '' : item2.processing == 1 ? '' : toUrl;
        console.log(webUrl);
        if (item2.is_live == 1) {
          if (window.android) {
            // window.android.jumpTo(toUrl);
            window.android.homeBannerWebClick(item2.id, item2.is_live, webUrl);
          } else {
            window.webkit.messageHandlers.lwdkit.postMessage({
              action: "pushToGuessDetailOrLive",
              data: {
                game_id: item2.id.toString(),
                is_live: item2.is_live,
                webUrl: webUrl
              }
            })
          }
        } else {
          if (item2.processing !== 1) {
            if (window.android) {
              // window.android.jumpTo(toUrl);
              window.android.homeBannerWebClick(item2.id, item2.is_live, webUrl);
            } else {
              window.webkit.messageHandlers.lwdkit.postMessage({
                action: "pushToGuessDetailOrLive",
                data: {
                  game_id: item2.id.toString(),
                  is_live: item2.is_live,
                  webUrl: webUrl
                }
              })
            }
          }
        }


        // else {
        //   window.location.href = toUrl;
        // }
        // console.log(starttime);
        // starttime = starttime.replace(/-/g,'/');
        // console.log(starttime);
        // console.log(new Date(starttime).getTime());
      }
    },
  }
</script>

<style scoped lang="less">
  .banner_top {
    height: 0.68rem;
    padding: 0 0.24rem;
    padding-left: 0.15rem;
    .left-title {
      font-size: 15px;
      /*font-weight: 600;*/
      color: #080808;
    }
  }

  .banner_box {
    background: #fff;
  }

  .matchBox {
    width: 50%;
    padding: 0 0.1rem;
    font-size: 0.24rem;

    .top-desc {
      font-size: 0.22rem;
      color: #111111;
      margin-bottom: 0.28rem;
      padding-left: 0.2rem;
      padding-right: .2rem;
    }

    .match_time {
      color: #989898;
      font-size: 0.20rem;
    }

    .match_desc {
      margin-top: -0.06rem;
      margin-bottom: 0.05rem;
      font-size: 0.18rem;
      color: #999999;
    }

    .match_detail {
      .img_style {
        width: 0.88rem;
        height: 0.88rem;
        border-radius: 50%;
      }

      .matching {
        width: 1rem;
        height: 0.32rem;
        font-size: 0.22rem;
        color: #E10019;
        margin-top: 0.26rem;
        border-radius: 10px;
        position: relative;
        &:after{
          content: " ";
          position: absolute;
          left: 0;
          top: 0;
          width: 200%;
          height: 1px;
          border: 1px solid #989898;
          color: #989898;
          height: 200%;
          transform-origin: left top;
          transform: scale(0.5);
          border-radius: 50px;
        }
        /*border: 0.5px solid #989898;*/
        /*padding: 0 .1rem;*/
      }

      .play_box {
        width: 3rem;
        text-align: center;
      }

      p {
        font-size: 0.24rem;
        margin-top: 0.1rem;
        color: #111111;
      }
    }
  }
</style>